<template>
  <view class="">
    <!-- <uni-nav-bar title="持仓详情"  fixed empty backgroundColor="#fff">
			<template #left>
				<tui-icon @click="navBack"  name="arrowleft"  :size="22"></tui-icon>
			</template>
		</uni-nav-bar> -->

    <t-header @back="navBack">持仓详情</t-header>
    <view v-if="detail">
      <tui-list-cell>
        <view class="flex justify-between align-center">
          <view class="text-gray">股票代码</view>
          <view class="flex align-center margin-top-xs">
            <image
              class="tag"
              :src="`/static/images/icons/${detail.marketCode}.png`"
              mode=""
            ></image>
            <text class="text-sm">{{ detail.code }}</text>
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell>
        <view class="flex justify-between align-center">
          <view class="text-gray">股票名称</view>
          <view class="flex align-center margin-top-xs">
            <text class="text-sm">{{ detail.title }}</text>
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell>
        <view class="flex justify-between align-center">
          <view class="text-gray">持股数</view>
          <view>
            {{ detail.number }}
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell>
        <view class="flex justify-between align-center">
          <view class="text-gray">买入价格</view>
          <view>
            {{ detail.buyprice }}
          </view>
        </view>
      </tui-list-cell>
      <!-- <tui-list-cell>
				<view class="flex justify-between align-center">
					<view class="text-gray">买入倍数</view>
					<view>
						{{detail.multiplying}}
					</view>
				</view>
			</tui-list-cell> -->
      <tui-list-cell>
        <view class="flex justify-between align-center">
          <view class="text-gray">买入市值</view>
          <view>
            {{ detail.cityValue }}
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell>
        <view class="flex justify-between align-center">
          <view class="text-gray">手续费</view>
          <view>
            {{ detail.allMoney }}
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell>
        <view class="flex justify-between align-center">
          <view class="text-gray">盈亏</view>
          <view :class="detail.profitLose > 0 ? 'text-red' : 'text-green'">
            {{ detail.profitLose }}
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell>
        <view class="flex justify-between align-center">
          <view class="text-gray">盈亏比例</view>
          <view :class="detail.profitLose > 0 ? 'text-red' : 'text-green'">
            {{ detail.profitLose_rate }}
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell>
        <view class="flex justify-between align-center">
          <view class="text-gray">买入时间</view>
          <view>
            {{ detail.createtime_name }}
          </view>
        </view>
      </tui-list-cell>

      <view class="padding">
        <tui-button type="theme" @click="sell(detail)">平仓</tui-button>
      </view>
    </view>
    <view>
      <tui-modal :show="showConfirm" custom @cancel="showConfirm = false">
        <view class="text-center text-bold text-lg padding-bottom"
          >确认平仓吗?</view
        >
        <tui-list-cell padding="20rpx 0">
          <view class="flex align-center justify-between">
            <view>名称</view>
            <view>{{ detail.title }}</view>
          </view>
        </tui-list-cell>
        <tui-list-cell padding="20rpx 0">
          <view class="flex align-center justify-between">
            <view>价格</view>
            <view>{{ detail.cai_buy }}</view>
          </view>
        </tui-list-cell>
        <tui-list-cell padding="20rpx 0">
          <view class="flex align-center justify-between">
            <view>股数</view>
            <view>{{ detail.number }}</view>
          </view>
        </tui-list-cell>
        <tui-list-cell padding="20rpx 0">
          <view class="flex align-center justify-between">
            <view>总价</view>
            <view>{{ detail.recommendnum }}</view>
          </view>
        </tui-list-cell>
        <view class="margin-top flex justify-between">
          <tui-button
            @click="showConfirm = false"
            width="220rpx"
            :size="28"
            type="gray"
            >取消</tui-button
          >
          <tui-button
            @click="confirmAction"
            width="220rpx"
            :size="28"
            type="theme"
            >确认</tui-button
          >
        </view>
      </tui-modal>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';

  // utils
  import { getDotCode } from '@/utils/stock.js';

  import THeader from '@/components/views/t-header/index.vue'; // 头部组件

  // api
  // import {sellAllStock} from '@/api/index.js';

  const detail = ref(null);
  const item = ref(null);
  const msgType = ref('');
  const showConfirm = ref(false);

  onLoad((options) => {
    if (options.data) {
      detail.value = JSON.parse(options.data);
    }
  });

  const navBack = () => {
    uni.navigateBack();
  };

  const sell = (item) => {
    console.log(item);
    // this.showConfirm = true
    // 全部卖出 sellAll
    uni.redirectTo({
      url: `/pages/shares/creatOrder?type=1&code=${getDotCode(
        detail.value.allcode
      )}`,
    });
  };

  const confirmAction = () => {
    console.log('确认卖出');
    let postData = {
      id: detail.value.id,
      allcode: detail.value.allcode,
      waystatus: 1,
    };
    showConfirm.value = false;
    console.log(postData);
    sellAllStock(postData).then((res) => {
      this.tui.modal(null, res.msg, false, () => {
        if (res.code == 1) {
          uni.$emit('refreshData', {});
          uni.navigateBack({
            delta: 1,
          });
        }
      });
    });
  };
</script>

<style lang="scss" scoped>
  .tag {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }
</style>
